<template>
  <main>
    <header>
      <v-row>
        <v-col
        cols="12"
        lg="4"
        style="margin-left:60px;">
          <v-btn color="warning" @click="clickAddDynamic"><v-icon left>mdi-pencil</v-icon>写动态</v-btn>
        </v-col>
      </v-row>
      
    </header>
    <article>
      <v-row>
        <v-col
        cols="12"
        lg="4"
      >
        <v-card
          class="mx-auto"
          max-width="400"
        >
          <v-img
            class="white--text align-end"
            height="200px"
            src="@/assets/lock.jpg"
          >
            <v-card-title>2023-01-23 17:48</v-card-title>
          </v-img>

          <v-card-text class="text--primary">
            <div>Whitehaven Beach</div>

            <div>Whitsunday Island, Whitsunday Islands</div>
          </v-card-text>

          <v-card-actions style="flex-direction:row-reverse">
            <v-btn
              color="red"
              text
            >
              Delete
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
      </v-row>
    </article> 

    <!-- 弹窗 -->
    <article>
      <v-dialog
        v-model="dialog"
        width="500"
        persistent
      >

        <v-card>
          <v-card-title
            class="headline grey lighten-2"
            primary-title
          >
            新增动态
          </v-card-title>
          <v-form
            ref="form"
            style="margin-top:20px;"
            lazy-validation
          >
             <v-textarea
              v-model="dynamicForm.text"
              color="primary"
            >
              <template v-slot:label>
                <div>
                  内容
                </div>
              </template>
            </v-textarea>
            <v-file-input
              accept="image/png, image/jpeg, image/bmp"
              placeholder="Pick an avatar"
              prepend-icon="mdi-camera"
              label="Avatar"
            ></v-file-input>  
          </v-form>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="warning"
              text
              @click="dialog = false"
            >
              取消
            </v-btn>
            <v-btn
              color="primary"
              text
              @click="dialog = false"
            >
              确认
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </article>
  </main>
</template> 

<script>
export default {
  data(){
    return{
      dialog: false,
      dynamicForm:{
        text: ''
      }
    }
  },
  methods:{
    clickAddDynamic(){
      console.log('点击了新增动态按钮');
      this.dialog = true
    }
  },
  mounted(){

  }
}
</script>

<style>

</style>